<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ICON Test Page</title>
    <style>
      .your-class {
        background-image: url("./a8icons.svg#编辑");
        background-repeat: no-repeat;
        background-size: 100px 100px;
        color: #5854a9;
        margin: 20px 20px;
      }
    </style>
  </head>
  <body>
    <h1>ICON Test Page</h1>
    <div>
      <input type="text" id="input" placeholder="输入图标ID" />
      <button id="btn">确定</button>
    </div>
    <div class="your-class" style="width: 100px; height: 100px">&nbsp;</div>
  </body>
  <script>
    var btn = document.getElementById("btn");
    var input = document.getElementById("input");
    btn.addEventListener("click", function () {
      var id = input.value;
      if (!id) return;
      var yourClass = document.querySelector(".your-class");
      yourClass.style.backgroundImage = "url('./a8icons.svg#" + id + "')";
    });
  </script>
</html>
